<template>
  <table-page
    ref="tablePageRef"
    title="公告列表"
    :search-config="searchConfig"
    :columns="tableConfig"
    :data="tableData"
    :loading="loading"
    :pagination-config="paginationConfig"
    :form-config="formConfig"
    :default-form-data="defaultFormData"
    @search="handleSearch"
    @reset="handleSearch"
    @selection-change="handleSelectionChange"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @add="handleAdd"
    @edit="handleEdit"
    @delete="handleDelete"
    @batch-delete="handleBatchDelete"
  />
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import TablePage from '@/components/TablePage/index.vue'
import { searchConfig, tableConfig } from './config/pageConfig'
import { formConfig, getDefaultFormData } from './config/formConfig'
import { noticeApi } from '@/api/notice'

// 状态定义
const tablePageRef = ref(null)
const loading = ref(false)
const tableData = ref([])
const searchParams = ref({})

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
})

// 分页配置
const paginationConfig = computed(() => ({
  total: pagination.total,
  currentPage: pagination.currentPage,
  pageSize: pagination.pageSize,
  pageSizes: [10, 20, 30, 50],
}))

// 默认表单数据
const defaultFormData = getDefaultFormData()

// 获取用户列表数据
const fetchNoticeList = async () => {
  try {
    loading.value = true
    const params = {
      ...searchParams.value,
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
    }
    const res = await noticeApi.getList(params)
    tableData.value = res.records
    pagination.total = res.total
  } catch (error) {
    console.error('获取公告列表失败:', error)
    ElMessage.error('获取公告列表失败')
  } finally {
    loading.value = false
  }
}

// 方法定义
const handleSearch = (params = {}) => {
  searchParams.value = params
  pagination.currentPage = 1
  fetchNoticeList()
}

const handleSelectionChange = (rows) => {
  console.log('选中行：', rows)
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  handleSearch()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  handleSearch()
}

const handleAdd = async (data) => {
  try {
    loading.value = true
    await noticeApi.addNotice(data)
    ElMessage.success('新增成功')
    fetchNoticeList()
  } catch (error) {
    console.error('新增公告失败:', error)
  } finally {
    loading.value = false
  }
}

const handleEdit = async (data) => {
  try {
    loading.value = true
    await noticeApi.updateNotice(data)
    ElMessage.success('保存成功')
    fetchNoticeList()
  } catch (error) {
    console.error('编辑公告失败:', error)
  } finally {
    loading.value = false
  }
}

const handleDelete = async (row) => {
  try {
    loading.value = true
    await noticeApi.deleteNotice([row.id])
    ElMessage.success('删除成功')
    fetchNoticeList()
  } catch (error) {
    console.error('删除公告失败:', error)
  } finally {
    loading.value = false
  }
}

const handleBatchDelete = async (rows) => {
  try {
    loading.value = true
    const ids = rows.map((row) => row.id)
    await noticeApi.deleteNotice(ids)
    ElMessage.success('删除成功')
    fetchNoticeList()
    tablePageRef.value?.clearSelection()
  } catch (error) {
    console.error('批量删除失败:', error)
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchNoticeList()
})
</script>

<style lang="scss" scoped>
.dictionary {
}
</style>
